import {
  View,
  Text,
  ScrollView,
  StyleSheet,
  Image,
  TextInput,
  Pressable,
  DimensionValue,
  Alert,
  Dimensions,
} from "react-native";
import React, { useEffect, useState, useRef } from "react";
import Icon from "react-native-vector-icons/Ionicons";
import {
  NativeStackNavigationProp,
  NativeStackScreenProps,
} from "@react-navigation/native-stack";
import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedKeyboard,
  useAnimatedStyle,
} from "react-native-reanimated";
import {
  SafeAreaView,
  useSafeAreaInsets,
} from "react-native-safe-area-context";

import HeaderBack from "../../components/HeaderBack";
import {
  getArticleOneApi,
  getArticleCommentApi,
  getArticleCommentReplayApi,
  postArticleCommentApi,
  postArticleLikeApi,
  deleteArticleLikeApi,
  postArticleCollectApi,
  deleteArticleCollectApi,
} from "../../api/article";
import { Article } from "../../types/api";
import { friendlyTimeAgo } from "../../utils/time";
import { BASE_URL } from "../../config";
import { PageResult, Comment } from "../../types/api";
// import { useKeyboardAnimation ,} from "../../hooks/useKeyboardAnimation";
import { hasMatchingIds } from "../../utils/utils";

const width = Dimensions.get("window").width;
const height = Dimensions.get("window").height;

export default function Deynamic({
  navigation,
  route,
}: NativeStackScreenProps<any>) {
  navigation.setOptions({
    headerLeft(props) {
      return <HeaderBack props={props} />;
    },
  });

  // 底部安全区域
  const insets = useSafeAreaInsets();
  const scrollViewRef = useRef<ScrollView>(null);

  // 初始化
  useEffect(() => {
    getArticleDetails();
    getArticleComment();
  }, []);

  // 内容详情
  const [articleDetails, setArticleDetails] = useState<Article>();
  const [imageRatio, setImageRatio] = useState();
  const [imageWidth, setImageWidth] = useState<DimensionValue>("100%");

  // 一级评论
  const [commentList, setCommentList] = useState<Comment[]>([]);
  const [commentPage, setCommentPage] = useState(1);
  const [commentLimit, setCommentLimit] = useState(5);
  const [commentTotal, setCommentTotal] = useState(100);

  // 二级评论
  const [commentReplyList, setCommentReplyList] = useState<Comment[]>([]);
  const [commentReplyPage, setCommentReplyPage] = useState(1);
  const [commentReplyLimit, setCommentReplyLimit] = useState(3);

  // 评论信息
  const [content, setContent] = useState("");

  // 回复评论
  // const keyboardBottom = useKeyboardAnimation();
  const keyboard = useAnimatedKeyboard();
  const translateStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateY: -keyboard.height.value }],
    };
  });
  const textInputRef = useRef<TextInput>(null);
  const [isShowKeyboard, setIsShowKeyboard] = useState(false);
  const [moment, setMoment] = useState<string>(); // 评论内容
  const [parentId, setParentId] = useState<string>(); // 二级评论id
  const [replayId, setReplayId] = useState<string>(); // 二级回复人id
  const [articleId, setArticleId] = useState(route.params?.id); // 文章id

  // 获取详情信息
  async function getArticleDetails() {
    const res = await getArticleOneApi<Article>(route.params?.id);
    if (res.code == 200) {
      setArticleDetails(res.data);

      const index = res.data.covers.length;
      if (index == 1) {
        setImageWidth("100%");
      } else if (index <= 4) {
        setImageWidth("49%");
      } else {
        setImageWidth("32%");
      }
    }
  }

  // 获取一级评论
  async function getArticleComment() {
    if (commentPage > Math.ceil(commentTotal / commentLimit)) return;

    const res = await getArticleCommentApi<PageResult<Comment[]>>(
      route.params?.id,
      { page: commentPage, limit: commentLimit }
    );
    if (res.code == 200) {
      if (res.data.page == 1) {
        setCommentList(res.data.list);
      } else {
        setCommentList([...commentList, ...res.data.list]);
      }

      setCommentPage(res.data.page + 1);
      setCommentTotal(res.data.total);
    }
  }

  // 获取二级评论
  async function getArticleCommentReplay(parent_id: string) {
    // 获取要查询的页数
    let index = 0;

    commentList
      ?.find((item) => item.id == parent_id)
      ?.children.forEach((item) => {
        if (!newCommentId.includes(item.id)) {
          index++;
        }
      });
    const childrenCount =
      commentList?.find((item) => item.id == parent_id)?.childrenCount || 0;

    // 通过计算获取接下来的数据
    const page = Math.ceil(index! / commentReplyLimit) + 1;

    // 超过最后一条的数据，则不请求
    if (index >= childrenCount) return;

    // 发起请求
    const res = await getArticleCommentReplayApi<PageResult<Comment[]>>(
      parent_id,
      { page, limit: commentReplyLimit }
    );
    if (res.code == 200) {
      // 添加二级评论
      setCommentList((prev) => {
        return prev?.map((item) => {
          if (item.id == parent_id) {
            // 判断是否有自己刚评论的数据
            if (hasMatchingIds(item.children, res.data.list)) {
              res.data.list = res.data.list.filter((chil) => {
                if (newCommentId.includes(chil.id)) {
                  return false;
                } else {
                  return true;
                }
              });
            }
            return {
              ...item,
              children: [...item.children, ...res.data.list],
            };
          } else {
            return item;
          }
        });
      });
    } else {
      Alert.alert("提示", "获取评论失败...");
    }
  }

  // 将评论内容记录到本地，并开启键盘
  useEffect(() => {
    textInputRef.current?.focus();
  }, [isShowKeyboard]);
  async function toggleKeykoardShow(bool: boolean) {
    setIsShowKeyboard(bool);
    // 清空数据
    if (!bool) {
      setParentId(undefined);
      setReplayId(undefined);
      setMoment(undefined);
    }
  }
  async function saveCommontLocalDate(parent_id?: string, replay_id?: string) {
    // 将数据进行保存
    setParentId(parent_id);
    setReplayId(replay_id);
    toggleKeykoardShow(true);
  }
  const [newCommentId, setNewCommentId] = useState<string[]>([]);
  // 添加一二级评论
  async function postArticleCommen() {
    const res = await postArticleCommentApi<Comment>({
      article_id: articleId,
      parent_id: parentId,
      replay_id: replayId,
      moment,
    });

    if (res.code == 200) {
      // Alert.alert("评论成功");
      //关闭键盘
      toggleKeykoardShow(false);
      // 动态插入数据
      const newComment: Comment = res.data;
      newComment.children = [];
      newComment.childrenCount = 0;
      // 一级评论
      if (!parentId) {
        setCommentList([newComment, ...commentList]);
        scrollAnimation();
      }
      // 二级评论
      else {
        // 寻找二级评论的id,插入最后一条
        setCommentList((prev) => {
          return prev?.map((item) => {
            if (item.id == parentId) {
              console.log(newComment);
              setNewCommentId([...newCommentId, newComment.id]);
              return {
                ...item,
                children: [...item.children, newComment],
                childrenCount: item.childrenCount + 1,
              };
            } else {
              return item;
            }
          });
        });
      }

      // 添加评论数
      if (articleDetails) {
        setArticleDetails({
          ...articleDetails,
          commentCount: articleDetails.commentCount! + 1,
        });
      }
    }
  }
  // 滚动到添加的评论区域
  const [scrollHeight, setScrollHeight] = useState(0);
  function scrollAnimation() {
    console.log(scrollHeight);
    scrollViewRef.current?.scrollTo({
      y: scrollHeight - 100,
      animated: true,
    });
  }

  // scroll滚动到底部
  function contentViewScrollEnd(e: any) {
    getArticleComment();
  }

  // 文章点赞
  async function toggleArticleLike() {
    // 取消点赞
    if (articleDetails?.isLike) {
      const res = await deleteArticleLikeApi(articleDetails?.article_id);
      if (res.code == 200) {
        setArticleDetails({
          ...articleDetails,
          isLike: false,
          likeCount: articleDetails?.likeCount! - 1,
        });
      }
    }
    // 添加点赞
    else {
      const res = await postArticleLikeApi(articleDetails?.article_id!);
      if (res.code == 200) {
        setArticleDetails({
          ...articleDetails!,
          isLike: true,
          likeCount: articleDetails?.likeCount! + 1,
        });
      }
    }
  }

  // 文章收藏
  async function toggleArticleCollect() {
    // 取消收藏
    if (articleDetails?.isCollect) {
      const res = await deleteArticleCollectApi(articleDetails?.article_id);
      if (res.code == 200) {
        setArticleDetails({
          ...articleDetails,
          isCollect: false,
          collectCount: articleDetails?.collectCount! - 1,
        });
      }
    }
    // 添加收藏
    else {
      const res = await postArticleCollectApi(articleDetails?.article_id!);
      if (res.code == 200) {
        setArticleDetails({
          ...articleDetails!,
          isCollect: true,
          collectCount: articleDetails?.collectCount! + 1,
        });
      }
    }
  }

  return (
    <View style={styles.container}>
      <ScrollView
        ref={scrollViewRef}
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
        onMomentumScrollEnd={contentViewScrollEnd}
      >
        <View
          style={styles.info}
          onLayout={(event) => {
            const height = event.nativeEvent.layout.height;
            setScrollHeight(scrollHeight + height);
          }}
        >
          <View style={styles.infoCover}>
            <Image
              style={styles.infoCoverImage}
              source={{
                uri: BASE_URL + articleDetails?.author.avatar,
              }}
            />
          </View>
          <View style={styles.infoMiddle}>
            <Text style={styles.infoName}>{articleDetails?.author.name}</Text>
            <Text style={styles.infnCity}>
              {articleDetails?.author.address || articleDetails?.author.desc}
            </Text>
          </View>
          <View style={styles.infoFocus}>
            <Text style={styles.infoFocusText}>关注</Text>
          </View>
        </View>
        <View
          style={styles.content}
          onLayout={(event) => {
            const height = event.nativeEvent.layout.height;
            setScrollHeight(scrollHeight + height);
          }}
        >
          <Text style={styles.contentTitle}>{articleDetails?.title}</Text>
          <Text style={styles.contentDesc}>{articleDetails?.content}</Text>
          <View style={[styles.wall]}>
            {articleDetails?.covers.map((item, index) => (
              <Pressable
                style={[styles.wallItem, { flexBasis: imageWidth }]}
                key={index}
                onPress={() => {}}
              >
                <Image
                  style={styles.wallImage}
                  source={{
                    uri: BASE_URL + item,
                  }}
                />
              </Pressable>
            ))}
          </View>
          {articleDetails?.topic_id && (
            <View style={styles.topic}>
              <View style={styles.topicTip}>
                <Icon name="earth" size={16} color="#5f3dc4" />
                <Text style={styles.topicText}>自律的路上越走越远</Text>
              </View>
            </View>
          )}
          <View style={styles.timeMore}>
            <Text style={styles.timeMoreText}>
              {friendlyTimeAgo(new Date(articleDetails?.createdAt!))}
            </Text>
            <Icon name="ellipsis-horizontal" size={22} color="#666" />
          </View>
        </View>
        <View style={styles.comment}>
          <View style={styles.commentTitle}>
            <Text style={styles.commentTitleText}>
              <Text style={{ fontWeight: "bold", color: "#000" }}>
                {articleDetails?.commentCount}
              </Text>{" "}
              评论
            </Text>
            <View style={styles.commentTitleOrder}>
              <Text
                style={[
                  styles.commentTitleOrderText,
                  styles.commentTitleOrderTextActive,
                ]}
              >
                按推荐
              </Text>
              <Text style={styles.commentTitleOrderText}>|</Text>
              <Text style={styles.commentTitleOrderText}>按时间</Text>
            </View>
          </View>
          <View style={styles.commentList}>
            {commentList?.map((item) => (
              <View
                style={styles.commentListItem}
                key={item.id}
                onLayout={(event) => {}}
              >
                <View style={styles.commentListItemAvatar}>
                  <Image
                    style={styles.commentListItemAvatarImage}
                    source={{
                      uri: BASE_URL + item.author.avatar,
                    }}
                  />
                </View>
                <View style={styles.commentListItemContentBox}>
                  <View style={styles.commentListItemContentBoxTop}>
                    <View style={styles.commentListItemContent}>
                      <Text style={styles.commentListItemContentName}>
                        {item.author.name}
                      </Text>
                      <Text style={styles.commentListItemContentDesc}>
                        {item.moment}
                      </Text>
                      <View style={styles.commentListItemContentMore}>
                        <Text style={styles.commentListItemContentMoreText}>
                          {friendlyTimeAgo(new Date(item.createdAt))}
                        </Text>
                        <Text style={styles.commentListItemContentMoreText}>
                          {item.author.address ? item.author.address : "保密"}
                        </Text>
                        <Pressable
                          onPress={() => {
                            saveCommontLocalDate(item.id);
                          }}
                        >
                          <Text style={styles.commentListItemContentMoreReplay}>
                            回复
                          </Text>
                        </Pressable>
                      </View>
                    </View>
                    <View style={styles.commentListItemLike}>
                      <Icon name="heart-outline" size={20} color="#999" />
                      <Text style={styles.commentListItemLikeText}>0</Text>
                    </View>
                  </View>

                  {/* 二级评论 */}
                  <View style={styles.commentMore}>
                    {item.children?.map((chil) => (
                      <View style={styles.commentMoreItem} key={chil.id}>
                        <View style={styles.commentMoreItemAvatar}>
                          <Image
                            style={styles.commentMoreItemAvatarImage}
                            source={{
                              uri: BASE_URL + chil.author.avatar,
                            }}
                          />
                        </View>
                        <View style={styles.commentListItemContent}>
                          <View style={styles.commentListItemContentName}>
                            <Text style={styles.commentListItemContentNameText}>
                              {chil.author.name}
                            </Text>
                            {chil.replayUser?.name && (
                              <>
                                <Icon
                                  style={styles.commentListItemContentNameIcon}
                                  name="play"
                                  size={14}
                                  color={"#ddd"}
                                ></Icon>
                                <Text
                                  style={styles.commentListItemContentNameText}
                                >
                                  {chil.replayUser?.name}
                                </Text>
                              </>
                            )}
                          </View>
                          <Text style={styles.commentListItemContentDesc}>
                            {chil.moment}
                          </Text>
                          <View style={styles.commentListItemContentMore}>
                            <Text style={styles.commentListItemContentMoreText}>
                              {friendlyTimeAgo(new Date(chil.createdAt))}
                            </Text>
                            <Text style={styles.commentListItemContentMoreText}>
                              {chil.author.address
                                ? chil.author.address
                                : "保密"}
                            </Text>
                            <Pressable
                              onPress={() => {
                                saveCommontLocalDate(item.id, chil.author.id);
                              }}
                            >
                              <Text
                                style={styles.commentListItemContentMoreReplay}
                              >
                                回复
                              </Text>
                            </Pressable>
                          </View>
                        </View>
                        <View style={styles.commentListItemLike}>
                          <Icon name="heart-outline" size={20} color="#999" />
                          <Text style={styles.commentListItemLikeText}>0</Text>
                        </View>
                      </View>
                    ))}
                  </View>
                  {item.childrenCount > 0 &&
                    item.childrenCount != item.children.length && (
                      <Pressable
                        onPress={() => {
                          getArticleCommentReplay(item.id);
                        }}
                        style={styles.commentMoreTip}
                      >
                        <Text style={styles.commentMoreTipText}>
                          -展开{item.childrenCount - item.children.length}
                          条回复-
                        </Text>
                      </Pressable>
                    )}
                </View>
              </View>
            ))}
          </View>
        </View>
      </ScrollView>
      <View
        style={[
          styles.bottomFixed,
          { paddingBottom: insets.bottom > 10 ? insets.bottom : 10 },
        ]}
      >
        <Pressable
          onPress={() => {
            toggleKeykoardShow(true);
          }}
          style={styles.bottomInput}
        >
          <Icon name="pencil" size={12} color="#999" />
          <Text style={styles.bottomInputTextText}>说点什么吧</Text>
        </Pressable>
        <View style={styles.bottomFixedBtn}>
          <Pressable
            onPress={() => {
              toggleArticleLike();
            }}
          >
            {articleDetails?.isLike ? (
              <Icon name="heart-outline" size={26} color="#15B886" />
            ) : (
              <Icon name="heart-outline" size={26} color="#333" />
            )}
          </Pressable>

          <Text
            style={[
              styles.bottomFixedBtnText,
              { color: articleDetails?.isLike ? "#15B886" : "#333" },
            ]}
          >
            {articleDetails?.likeCount}
          </Text>
        </View>
        <View style={styles.bottomFixedBtn}>
          <Icon name="chatbubble-ellipses-outline" size={22} color="#333" />
          <Text style={styles.bottomFixedBtnText}>
            {articleDetails?.commentCount}
          </Text>
        </View>
        <View style={styles.bottomFixedBtn}>
          <Pressable
            onPress={() => {
              toggleArticleCollect();
            }}
          >
            {articleDetails?.isCollect ? (
              <Icon name="star-outline" size={24} color="#15B886" />
            ) : (
              <Icon name="star-outline" size={24} color="#333" />
            )}
          </Pressable>
          <Text
            style={[
              styles.bottomFixedBtnText,
              { color: articleDetails?.isCollect ? "#15B886" : "#333" },
            ]}
          >
            {articleDetails?.collectCount}
          </Text>
        </View>
      </View>
      {isShowKeyboard && (
        <Animated.View style={[styles.replayBox, translateStyle]}>
          {/* <View> */}
          <Pressable
            onPress={() => toggleKeykoardShow(false)}
            style={{ flex: 1 }}
          ></Pressable>
          <View style={styles.replayInputRol}>
            <View style={styles.replayLeft}>
              <TextInput
                ref={textInputRef}
                style={styles.replayTextInput}
                placeholder="爱评论的人运气都不太差"
                onChangeText={(text) => {
                  setMoment(text);
                }}
              ></TextInput>
            </View>
            <Pressable
              onPress={() => postArticleCommen()}
              style={styles.replaySubmit}
            >
              <Text style={styles.replaySubmitText}>发送</Text>
            </Pressable>
          </View>
          {/* </View> */}
        </Animated.View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    paddingHorizontal: 20,
  },
  info: {
    flexDirection: "row",
    // justifyContent: "space-between",
    alignItems: "center",
    paddingVertical: 10,
  },
  infoCover: {
    width: 44,
    height: 44,
    borderRadius: 22,
    marginRight: 10,
    overflow: "hidden",
  },
  infoCoverImage: {
    width: "100%",
    height: "100%",
  },
  infoMiddle: {
    height: 44,
    justifyContent: "space-around",
    flex: 1,
  },
  infoName: {
    fontSize: 16,
    // fontWeight: "bold",
  },
  infnCity: {
    fontSize: 12,
    color: "#999",
  },
  infoFocus: {
    backgroundColor: "#12b886",
    paddingHorizontal: 20,
    paddingVertical: 6,
    borderRadius: 20,
  },
  infoFocusText: {
    fontSize: 12,
    color: "#fff",
  },
  content: {
    flex: 1,
    backgroundColor: "#fff",
  },
  contentTitle: {
    fontSize: 18,
    // fontWeight: "bold",
    marginBottom: 10,
    color: "#000",
  },
  contentDesc: {
    fontSize: 16,
    lineHeight: 24,
    color: "#333",
  },
  wall: {
    marginTop: 10,
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-between",
  },
  wallItem: {
    marginBottom: "2%",
  },
  wallImage: {
    width: "100%",
    aspectRatio: 1,
    borderRadius: 6,
    resizeMode: "cover",
  },
  topic: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 10,
    justifyContent: "space-between",
    paddingBottom: 10,
  },
  topicTip: {
    flexDirection: "row",
    backgroundColor: "#d0bfff",
    paddingVertical: 4,
    paddingHorizontal: 6,
    borderRadius: 20,
    alignItems: "center",
  },
  topicText: {
    fontSize: 14,
    color: "#5f3dc4",
    marginLeft: 4,
    paddingRight: 8,
  },
  timeMore: {
    flexDirection: "row",
    justifyContent: "space-between",
    // paddingTop: 10,
    paddingBottom: 20,
    alignItems: "center",
    borderBottomWidth: 1,
    borderColor: "#eee",
  },
  timeMoreText: {
    fontSize: 14,
    color: "#999",
  },
  comment: {
    marginTop: 30,
  },
  commentTitle: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderColor: "#eee",
  },
  commentTitleText: {
    fontSize: 16,
    color: "#333",
  },
  commentTitleOrder: {
    flexDirection: "row",
    alignItems: "center",
    fontSize: 14,
    color: "#999",
  },
  commentTitleOrderText: {
    marginHorizontal: 2,
    fontSize: 12,
    color: "#999",
  },
  commentTitleOrderTextActive: {
    color: "#333",
  },
  commentList: {
    paddingBottom: 120,
  },
  commentListItem: {
    flexDirection: "row",
    paddingVertical: 10,
  },
  commentListItemAvatar: {
    width: 40,
    height: 40,
    borderRadius: 20,
    overflow: "hidden",
    marginRight: 10,
  },
  commentListItemAvatarImage: {
    width: "100%",
    height: "100%",
  },
  commentListItemContentBox: {
    flex: 1,
  },
  commentListItemContentBoxTop: {
    flex: 1,
    flexDirection: "row",
  },
  commentListItemContent: {
    flex: 1,
    justifyContent: "space-between",
  },
  commentListItemContentName: {
    flexDirection: "row",
  },
  commentListItemContentNameText: {
    fontSize: 12,
    color: "#555",
  },
  commentListItemContentNameIcon: {
    marginHorizontal: 4,
  },
  commentListItemContentDesc: {
    fontSize: 14,
    // color: "#000",
    marginVertical: 6,
  },
  commentListItemContentMore: {
    flexDirection: "row",
    alignItems: "center",
  },
  commentListItemContentMoreText: {
    fontSize: 12,
    color: "#999",
    marginRight: 4,
  },
  commentListItemContentMoreReplay: {
    fontSize: 12,
    color: "#666",
    marginLeft: 6,
  },
  commentListItemLike: {
    paddingHorizontal: 4,
    paddingTop: 10,
    alignItems: "center",
  },
  commentListItemLikeText: {
    fontSize: 12,
    marginTop: 6,
    color: "#999",
  },
  commentMoreTip: {},
  commentMoreTipText: {
    fontSize: 12,
    color: "#087f5b",
    marginTop: 10,
  },
  commentMore: {
    // paddingTop: 10,
    // backgroundColor:'red'
  },
  commentMoreItem: {
    flexDirection: "row",
    // alignItems: "center",
    marginTop: 20,
  },
  commentMoreItemAvatar: {
    width: 28,
    height: 28,
    borderRadius: 20,
    overflow: "hidden",
    marginRight: 10,
  },
  commentMoreItemAvatarImage: {
    width: "100%",
    height: "100%",
  },
  bottomFixed: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
    // height: 40, // 设置底部视图的高度，根据需要调整
    backgroundColor: "#fff", // 示例背景色
    zIndex: 1, // 确保底部视图在其他内容之上（可选）
    borderTopWidth: 1, // 添加顶部边框线（可选）
    borderColor: "#eee", // 边框颜色（可选）
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 20,
    paddingHorizontal: 10,
    // paddingBottom: 0,
  },
  bottomInput: {
    backgroundColor: "#efefef",
    height: 34,
    flex: 1,
    padding: 4,
    paddingLeft: 14,
    borderRadius: 15,
    marginRight: 14,
    flexDirection: "row",
    alignItems: "center",
  },
  bottomInputTextText: {
    color: "#999",
    fontSize: 12,
    paddingLeft: 10,
  },
  bottomFixedBtn: {
    paddingHorizontal: 6,
    flexDirection: "row",
    // backgroundColor:'red',
    width: 48,
  },
  bottomFixedBtnText: {
    // position:'absolute',
    fontSize: 12,
    color: "#333",
    marginLeft: 0,
    marginTop: -4,
  },
  replayBox: {
    width,
    height: "100%",
    position: "absolute",
    // bottom: 0,
    backgroundColor: "rgba(0,0,0,.05)",
    zIndex: 44,
    justifyContent: "flex-end",
    // flexDirection: "row",
  },
  replayInputRol: {
    backgroundColor: "#fff",
    alignItems: "center",
    width,
    flexDirection: "row",
    padding: 10,
    paddingBottom: 20,
  },
  replayLeft: {
    flex: 1,
    backgroundColor: "#efefef",
    height: 40,
    borderRadius: 20,
    alignItems: "center",
    // justifyContent: "center",
    flexDirection: "row",
    paddingHorizontal: 10,
  },
  replayTextInput: {
    color: "#333",
    height: "90%",
    flex: 1,
  },
  replaySubmit: {
    borderRadius: 20,
    justifyContent: "center",
    alignItems: "center",

    backgroundColor: "#11AF7F",
    height: 40,
    width: 70,
    marginLeft: 10,
  },
  replaySubmitText: {
    color: "#fff",
    fontSize: 14,
    fontWeight: "bold",
  },
});
